<template>
  <div class="red-packet-box">
    <div class="top-div">
      <h1>红包已被领取</h1>
    </div>

    <h2 style="text-align: center;margin: 50px;">恭喜您已成功领取现金红包</h2>

    <h1 style="color: #fde3c0;text-align: center;">1.00元</h1>

    <div style="text-align: center;">已提到您的微信账号</div>

    <div class="path-card">
      <div>查看路径</div>
      <div class="icon-list">
        <div class="icon-item">
          <img src="../../assets/images/message.png" alt="">
          <div>微信</div>
        </div>
        <div class="van-icon-arrow-div"><van-icon name="arrow" color="#4dad85" /></div>
        <div class="icon-item">
          <img src="../../assets/images/me.png" alt="">
          <div>我</div>
        </div>
        <div class="van-icon-arrow-div"><van-icon name="arrow" color="#4dad85" /></div>
        <div class="icon-item">
          <img src="../../assets/images/wechat-pay.png" alt="">
          <div>服务</div>
        </div>
        <div class="van-icon-arrow-div"><van-icon name="arrow" color="#4dad85" /></div>
        <div class="icon-item">
          <img src="../../assets/images/wallet.png" alt="">
          <div>钱包</div>
        </div>

      </div>

    </div>

    <van-button type="danger" color="#e5ac65" round block style="width: 80%; margin: 20px auto;" to="/">返回活动</van-button>
    
  </div>
</template>

<style scoped lang="less">
.red-packet-box{
  .top-div{
    height: 200px;
    background: linear-gradient(to bottom, #f34170, #ef668e);
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fde3c0;
  }

  .path-card{
    width: 80%;
    margin: 20px auto 0;
    border: 1px solid #e2e2e0;
    border-radius: 5px;
    text-align: center;
    padding: 20px 0;

    .icon-list{
      display: flex;
      justify-content:space-around;
      align-items: flex-end;
      padding: 20px 20px 0;

      .icon-item{
        text-align: center;

        img{
          width: 40px;
          height: 40px;
        }
      }

      .van-icon-arrow-div{
        padding-bottom: 25px;
      }

    }
  }
}
</style>